
var $ = require('jquery');

module.exports = {
    // colorList: [
    //     "#00c5d2",
    //     "#ef98d0",
    //     "#802bff",
    //     "#54c6af",
    //     "#edcd61",
    //     "#0081fa",
    //     "#73e3f8",
    //     "#ffd473",
    //     "#1c3a9f",
    //     "#421b9f",
    //     "#16889d"
    // ],
    init: function (ele, AxisData, data,colorList) {
        // console.log(this.colorList)
        var base = +new Date(1968, 9, 3);
        var oneDay = 24 * 3600 * 1000;
        var date = [];
        var date1 = [];
        var data = [Math.random() * 500];
 


var colorList = [];
for (var i = 0, len = 1000*3; i < len; i++) {
  var check = Math.random();
  if(check<0.5){
    colorList.push("#FF4041")
  }else{
    colorList.push("#18B953")
  }
};

        for (var i = 1; i < 500; i++) {
            var now = new Date(base += oneDay);
            date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
            data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
        }
        var data1 = [Math.random() * 500];

        for (var i = 1; i < 600; i++) {
            var now = new Date(base += oneDay);
            date1.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
            data1.push(Math.round((Math.random() - .8) * 20 + data[i - 1]));
        }

        var volumes = data;
        option = {

        dataset: {
            source: date,
        },
            tooltip: {
                axisPointer:{
                  type:'line',
                  lineStyle:{
                     width:1,
                     color:"rgba(43,102,240,1)",
                  },
                  shadowStyle:{
                      shadowColor:'#000',
                      color:"rgba(8,6,17,.3)",
                      // z:"-100",
                      // opacity:".1"
                      // shadowBlur:20,
                  }
                },
                trigger: 'axis',
                showDelay: 0,
                hideDelay: 50,
                transitionDuration:0,
                backgroundColor : 'rgba(0,0,0,0.9)',
              //   borderColor : 'rgba(47,69,84,1)',
                borderRadius : 8,
                borderWidth: 2,
                // padding: 4,   
            },
            grid: [{
                bottom: 80,
                left:50,
                right:10,
                top:40
            } ,{
                left:60,
                right:20,
                height: 40,
                bottom: 20
            }],
   
            xAxis:[ {
                type: 'category',
                boundaryGap: false,
                
             
            }, {
                type: 'category',
                gridIndex: 1,
                scale: true,
                boundaryGap : false,
                axisLine: {onZero: false},
                axisTick: {show: false},
                splitLine: {show: false},
                axisLabel: {show: false},
                splitNumber: 0,
                min: 'dataMin',
                max: 'dataMax',
                data: date,
                axisLabel: {
                    show: true,
                    textStyle: {
                        // fontWeight:'bold',
                        color: '#3A454D',
                        fontSize:10
                    }
                },
            }],
            yAxis: [{
                type: 'value',
                splitNumber: 4,
                splitLine: {
                    show:true,
            
                    //  改变轴线颜色
                    lineStyle: {
                        width:1,
                        // 使用深浅的间隔色
                        color: ["#F3F3F3"]
                    }                            
            },
            axisLabel: {
                show: true,
                textStyle: {
                    // fontWeight:'bold',
             
                    fontSize:10
                }
            },
            }, {
                type: 'value',
                gridIndex: 1,
                scale: true,
                // boundaryGap : false,
                // axisLine: {onZero: false},
                // axisTick: {show: false},
                splitLine: {
                    show:false,
                    //  改变轴线颜色
                    lineStyle: {
                        width:1,
                        // 使用深浅的间隔色
                        color: ["#F3F3F3"]
                    }                            
            },
                axisLabel: {show: false},
                splitNumber: 3,
                min: 'dataMin',
                max: 'dataMax'
            }],
      
            series: [
            
                {
                    name: 'Volume',
                    type: 'bar',
                    xAxisIndex: 1,
                    yAxisIndex: 1,
                    barGap:"100%",
                    itemStyle: {
                        normal: {
                            // 随机显示
                            //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
                          
                            // 定制显示（按顺序）
                            color: function(params) { 
                                return colorList[params.dataIndex] 
                            }
                        },
                    },
                    data: volumes.slice(1,100)
                },
                {
                    name:'模拟数据',
                    type:'line',
                    smooth:true, 
                    symbol: 'none',
                    sampling: 'average',
                    itemStyle: {
                        
                    },
                    lineStyle:{
                        width:.8,
                        shadowColor:"rgba(0,0,0,0.3)",
                        shadowBlur:30,
                        shadowOffsetY:4,
                        color:"rgba(43,102,240,1)",
                      
                    },
           
                
                    areaStyle: {normal: {
                        color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color:"rgba(43,102,240,.1)" },
                                    {offset: 0.3, color:"rgba(43,102,240,.1)" },
                                    {offset: 1, color:"rgba(43,102,240,.1)" }
                                ]
                        )
                    }},
                    data: data
                }, 
       
       
            ]
        };
        

        var chart = echarts.init(ele.get(0), 'customed');
        chart.setOption(option);

    },
    // showTag: function (ele, AxisData, data) {
    //     var color = this.colorList;
    //     //    console.log(color[0])
    //     data.map(function (item, index) {
    //         var style = 'style="background:' + color[index] + ' " '
    //         // console.log(style)
    //         var htmlinsert = ' <div class="tag-item"> <div class="color-tip"' + style + '> </div>' + AxisData[index] + ' : ' + item + '</div>'

    //         ele.append(htmlinsert)
    //     })

    // },
    // dashboardChartShow: function (ele,value,maxValue,color) {

    //     var color1 = "rgba("+color+',1)';
    //     var color2 ="rgba("+ color+',.6)';
    //     var color3 = "rgba("+ color+',.3)';
    //     option = {

    //         toolbox: { //可视化的工具箱
    //             show: false,
    //             feature: {
    //               restore: { //重置
    //                 show: true
    //               },
    //               saveAsImage: {//保存图片
    //                 show: true
    //               }
    //             }
    //           },
    //         //   tooltip: { //弹窗组件
    //         //     formatter: "{a} <br/>{b} : {c}%"
    //         //   },
        
    //           series: [{
    //             name: '退货仓',
    //             type: 'gauge',
    //             radius: "85%",
    //             detail: { formatter: '{value} %' },
    //             axisLine: { 
    //                 show:false,           // 坐标轴线
    //               lineStyle: {       // 属性lineStyle控制线条样式
    //                 width: 6,
    //                 //  color: [[0.3, '#00C5D2'], [0.6, '#4E72F0'], [1, '#FF9A00']]
    //                 color: [[0.33, color3], [0.67, color2], [1, color1]]
    //               }
    //             },
    //             splitLine: { // 分隔线
    //                 // length: 25, // 属性length控制线长
    //                 lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
    //                     width: 0,
    //                     color: 'rgba(0,0,0,0)',
    //                     shadowColor: 'rgba(0,0,0,0)', //默认透明
    //                     shadowBlur: 10,
    //                     opacity:0,
    //                 }
    //             },
    //             pointer: {//控制指针样式
    //               shadowColor: '#fff', //默认透明
        
    //               shadowBlur: 15,
    //               width: 3//控制指针宽度
    //             },
    //             title: {
    //               // 其余属性默认使用全局文本样式，详见TEXTSTYLE
    //               // fontWeight: 'bolder',
    //               fontSize: 12,
    //               color:color1
    //               // fontStyle: 'italic'
    //             },
    //             axisLabel: {
    //               show: false,
    //               textStyle: {
    //                 color: '#fff',
    //                 fontSize: 7,
    //               }
    //             },
    //             axisTick:{
    //                 splitNumber:0,
    //                 lineStyle:{
    //                     opacity:0.3,
    //                 }
    //             },
    //             max:maxValue,

    //             detail: {
    //               textStyle: {
    //                 // fontWeight: 'bolder',
    //                 // color: 'blue',
    //                 fontSize: 14,
    //                 color:color1,
    //               }
    //             },
        
    //             data: [{ value: value, name: '退货仓' }]
    //           }]
    //      };
    //     var chart = echarts.init(ele.get(0), 'customed');
    //     chart.setOption(option);

    // }


}


